<template>
  <div class="home">
    <header class="header">
      <div class="header-left">
        <h1>家族谱系图</h1>
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="输入姓名或年份搜索"
            :prefix-icon="Search"
            clearable
            @input="handleSearch"
          />
          <div v-if="searchResults.length > 0" class="search-results">
            <div
              v-for="result in searchResults"
              :key="result.id"
              class="search-result-item"
              @click="scrollToMember(result)"
            >
              <span class="name">{{ result.name }}</span>
              <span class="year">{{ formatDate(result.birthDate) }} - {{ result.deathDate ? formatDate(result.deathDate) : '在世' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="header-buttons">
        <el-button v-if="!isAdmin" type="primary" @click="showLoginDialog">
          管理员登录
        </el-button>
        <el-button v-else type="danger" @click="handleLogout">
          退出管理员
        </el-button>
        <div class="mode-indicator" :class="{ admin: isAdmin }">
          {{ isAdmin ? '管理员模式' : '游客模式' }}
        </div>
      </div>
    </header>

    <div class="toolbar">
      <el-button-group>
        <el-button :icon="ZoomIn" @click="zoomIn">
          放大
        </el-button>
        <el-button :icon="ZoomOut" @click="zoomOut">
          缩小
        </el-button>
        <el-button :icon="Refresh" @click="resetView">
          重置视图
        </el-button>
      </el-button-group>
    </div>

    <div class="tree-wrapper" ref="container">
      <div 
        class="tree-container" 
        :style="{ 
          transform: `translate(-50%, -50%) scale(${scale}) translate(${translateX}px, ${translateY}px)`,
          transition: 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)'
        }"
        @mousedown="startDrag"
        @wheel.prevent="handleWheel"
      >
        <family-member
          v-if="ancestor"
          :member="ancestor"
          :is-ancestor="true"
          :is-admin="isAdmin"
          :is-highlighted="highlightedMember?.id === ancestor?.id"
          :highlighted-member="highlightedMember"
          @edit="editMember"
          @add-spouse="addSpouse"
          @add-child="addChild"
          @delete-spouse="deleteSpouse"
          @delete-child="deleteChild"
          @handle-upload="handleFileUpload"
          @member-click="handleMemberClick"
        />
        <div v-else class="loading-container">
          <el-empty description="暂无家族数据" />
        </div>
      </div>
    </div>

    <!-- 编辑成员对话框 -->
    <el-dialog
      v-model="showEditDialog"
      :title="modalTitle"
      width="500px"
    >
      <el-form
        ref="editForm"
        :model="editingMember"
        :rules="rules"
        label-width="100px"
      >
        <template v-if="modalTitle === '添加配偶'">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="editingMember.name" />
          </el-form-item>
          <el-form-item label="结婚日期" prop="marriageDate">
            <el-date-picker
              v-model="editingMember.marriageDate"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="出生日期" prop="birthDate">
            <el-date-picker
              v-model="editingMember.birthDate"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="逝世日期">
            <el-date-picker
              v-model="editingMember.deathDate"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="editingMember.gender">
              <el-option label="男" value="male" />
              <el-option label="女" value="female" />
            </el-select>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-input v-model="editingMember.role" />
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="editingMember.name" />
          </el-form-item>
          <el-form-item label="出生日期" prop="birthDate">
            <el-date-picker
              v-model="editingMember.birthDate"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="逝世日期">
            <el-date-picker
              v-model="editingMember.deathDate"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="editingMember.gender">
              <el-option label="男" value="male" />
              <el-option label="女" value="female" />
            </el-select>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-input v-model="editingMember.role" />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <el-button @click="showEditDialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="saveMember">
          保存
        </el-button>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
      v-model="showDeleteDialog"
      title="确认删除"
      width="400px"
    >
      <div class="delete-content">
        <el-icon class="warning-icon">
          <Warning />
        </el-icon>
        <p>确定要删除 <span class="highlight">{{ deletingMember?.name }}</span> 吗？</p>
        <p class="warning-text">
          此操作不可撤销。
        </p>
      </div>
      <template #footer>
        <el-button @click="showDeleteDialog = false">
          取消
        </el-button>
        <el-button type="danger" @click="confirmDelete">
          确认删除
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted, nextTick, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { Search, ZoomIn, ZoomOut, Refresh, Warning } from '@element-plus/icons-vue'
import FamilyMember from '@/components/FamilyMember.vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'Home',
  components: {
    FamilyMember
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const searchQuery = ref('')
    const searchResults = ref([])
    const showEditDialog = ref(false)
    const showDeleteDialog = ref(false)
    const editingMember = ref({})
    const deletingMember = ref(null)
    const modalTitle = ref('')
    const highlightedMember = ref(null)
    const ancestor = ref(null)

    const isAdmin = computed(() => store.getters.isAdmin)
    const scale = ref(1)

    const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      birthDate: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
      gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
      role: [{ required: true, message: '请输入角色', trigger: 'blur' }]
    }

    // 拖拽相关状态
    const isDragging = ref(false)
    const startX = ref(0)
    const startY = ref(0)
    const translateX = ref(0)
    const translateY = ref(0)

    // 加载家族树数据
    const loadFamilyTree = async () => {
      try {
        const token = localStorage.getItem('token')
        const response = await fetch('/api/members/tree', {
          headers: {
            'Authorization': token ? `Bearer ${token}` : ''
          }
        })
        const data = await response.json()
        if (data.code === 200) {
          ancestor.value = data.data
        } else {
          ElMessage.error(data.message || '加载家族树失败')
        }
      } catch (error) {
        console.error('加载家族树失败:', error)
        ElMessage.error('加载家族树失败')
      }
    }

    // 搜索成员
    const handleSearch = async () => {
      if (!searchQuery.value.trim()) {
        searchResults.value = []
        return
      }

      try {
        const token = localStorage.getItem('token')
        const response = await fetch(`/api/members/search?query=${encodeURIComponent(searchQuery.value)}`, {
          headers: {
            'Authorization': token ? `Bearer ${token}` : ''
          }
        })
        const data = await response.json()
        if (data.code === 200) {
          searchResults.value = data.data
        }
      } catch (error) {
        console.error('搜索失败:', error)
        ElMessage.error('搜索失败')
      }
    }

    // 缩放功能
    const zoomIn = () => {
      if (scale.value < 2) {
        scale.value += 0.1
      }
    }

    const zoomOut = () => {
      if (scale.value > 0.5) {
        scale.value -= 0.1
      }
    }

    // 开始拖拽
    const startDrag = (event) => {
      // 如果点击的是按钮或输入框等元素，不启动拖拽
      if (event.target.closest('.member-actions') || 
          event.target.closest('.avatar-container') ||
          event.target.closest('button') ||
          event.target.closest('input')) {
        return
      }

      isDragging.value = true
      startX.value = event.clientX - translateX.value
      startY.value = event.clientY - translateY.value

      // 添加dragging类
      const container = document.querySelector('.tree-container')
      if (container) {
        container.classList.add('dragging')
      }

      // 添加全局事件监听
      document.addEventListener('mousemove', handleDrag)
      document.addEventListener('mouseup', stopDrag)
    }

    // 处理拖拽
    const handleDrag = (event) => {
      if (!isDragging.value) return

      translateX.value = event.clientX - startX.value
      translateY.value = event.clientY - startY.value
    }

    // 停止拖拽
    const stopDrag = () => {
      isDragging.value = false

      // 移除dragging类
      const container = document.querySelector('.tree-container')
      if (container) {
        container.classList.remove('dragging')
      }

      document.removeEventListener('mousemove', handleDrag)
      document.removeEventListener('mouseup', stopDrag)
    }

    // 重置视图
    const resetView = () => {
      // 设置合适的缩放比例，确保能看到更多成员
      scale.value = 0.8

      // 等待下一个渲染周期，确保DOM已更新
      nextTick(() => {
        // 如果存在创始人节点，则将视图顶部中心对准创始人
        if (ancestor.value) {
          const memberCard = document.querySelector(`[data-member-id="${ancestor.value.id}"]`)
          if (memberCard) {
            const container = document.querySelector('.tree-wrapper')
            if (container) {
              const containerRect = container.getBoundingClientRect()
              const memberRect = memberCard.getBoundingClientRect()

              // 计算创始人卡片的位置（相对于视口）
              const memberTop = memberRect.top
              const memberCenterX = memberRect.left + memberRect.width / 2

              // 计算容器的位置
              const containerTop = containerRect.top
              const containerCenterX = containerRect.left + containerRect.width / 2

              // 计算需要的偏移量，使创始人位于顶部中心位置（预留合适的边距）
              const topMargin = containerRect.height * 0.2 // 使用容器高度的20%作为顶部边距
              const offsetX = (containerCenterX - memberCenterX)
              const offsetY = (containerTop + topMargin - memberTop)

              // 更新位置
              translateX.value = offsetX / scale.value
              translateY.value = offsetY / scale.value
            }
          }
        }
      })
    }

    // 格式化日期
    const formatDate = (date) => {
      if (!date) return ''
      return new Date(date).toLocaleDateString()
    }

    // 编辑成员
    const editMember = (member) => {
      editingMember.value = { ...member }
      modalTitle.value = '编辑成员'
      showEditDialog.value = true
    }

    // 添加配偶
    const addSpouse = (parentMember) => {
      editingMember.value = {
        parentId: parentMember.id,
        gender: parentMember.gender === 'male' ? 'female' : 'male',
        role: '配偶'
      }
      modalTitle.value = '添加配偶'
      showEditDialog.value = true
    }

    // 添加子女
    const addChild = (parentMember) => {
      editingMember.value = {
        parentId: parentMember.id,
        role: '子女'
      }
      modalTitle.value = '添加子女'
      showEditDialog.value = true
    }

    // 删除配偶
    const deleteSpouse = (member) => {
      deletingMember.value = member.spouse
      showDeleteDialog.value = true
    }

    // 删除子女
    const deleteChild = (member) => {
      deletingMember.value = member
      showDeleteDialog.value = true
    }

    // 确认删除
    const confirmDelete = async () => {
      try {
        let url = ''
        if (deletingMember.value.role === '配偶') {
          url = `/api/members/${deletingMember.value.id}/spouse`
        } else {
          url = `/api/members/${deletingMember.value.id}`
        }

        const response = await fetch(url, {
          method: 'DELETE',
          headers: {
            'Authorization': `Bearer ${store.state.token}`
          }
        })
        const data = await response.json()
        if (data.code === 200) {
          ElMessage.success(deletingMember.value.role === '配偶' ? '删除配偶成功' : '删除成员成功')
          loadFamilyTree()
        } else {
          ElMessage.error(data.message || '删除失败')
        }
      } catch (error) {
        console.error('删除失败:', error)
        ElMessage.error('删除失败')
      } finally {
        showDeleteDialog.value = false
        deletingMember.value = null
      }
    }

    // 保存成员
    const saveMember = async () => {
      try {
        if (modalTitle.value === '添加配偶') {
          // 先创建新成员
          const newMemberResponse = await fetch('/api/members', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${store.state.token}`
            },
            body: JSON.stringify({
              name: editingMember.value.name,
              birthDate: editingMember.value.birthDate,
              deathDate: editingMember.value.deathDate,
              gender: editingMember.value.gender,
              role: editingMember.value.role
            })
          })
          const newMemberData = await newMemberResponse.json()
          
          if (newMemberData.code === 200) {
            // 添加配偶关系
            const response = await fetch(`/api/members/${editingMember.value.parentId}/spouse`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${store.state.token}`
              },
              body: JSON.stringify({
                spouseId: newMemberData.data.id,
                marriageDate: editingMember.value.marriageDate
              })
            })
            const data = await response.json()
            if (data.code === 200) {
              ElMessage.success('添加配偶成功')
              loadFamilyTree()
            } else {
              ElMessage.error(data.message || '添加配偶关系失败')
            }
          } else {
            ElMessage.error(newMemberData.message || '创建成员失败')
          }
        } else if (modalTitle.value === '添加子女') {
          // 先创建新成员
          const newMemberResponse = await fetch('/api/members', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${store.state.token}`
            },
            body: JSON.stringify({
              name: editingMember.value.name,
              birthDate: editingMember.value.birthDate,
              deathDate: editingMember.value.deathDate,
              gender: editingMember.value.gender,
              role: editingMember.value.role
            })
          })
          const newMemberData = await newMemberResponse.json()
          
          if (newMemberData.code === 200) {
            // 添加子女关系
            const response = await fetch(`/api/members/${editingMember.value.parentId}/children`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${store.state.token}`
              },
              body: JSON.stringify({
                childId: newMemberData.data.id
              })
            })
            const data = await response.json()
            if (data.code === 200) {
              ElMessage.success('添加子女成功')
              loadFamilyTree()
            } else {
              ElMessage.error(data.message || '添加子女关系失败')
            }
          } else {
            ElMessage.error(newMemberData.message || '创建成员失败')
          }
        } else {
          // 创建或更新成员
          const updatedFields = {
            name: editingMember.value.name,
            birthDate: editingMember.value.birthDate,
            deathDate: editingMember.value.deathDate,
            gender: editingMember.value.gender,
            role: editingMember.value.role
          }

          const response = await fetch(`/api/members${editingMember.value.id ? `/${editingMember.value.id}` : ''}`, {
            method: editingMember.value.id ? 'PUT' : 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${store.state.token}`
            },
            body: JSON.stringify(updatedFields)
          })
          const data = await response.json()
          if (data.code === 200) {
            ElMessage.success('保存成功')
            loadFamilyTree()
          } else {
            ElMessage.error(data.message || '保存失败')
          }
        }
      } catch (error) {
        console.error('保存失败:', error)
        ElMessage.error('保存失败')
      } finally {
        showEditDialog.value = false
      }
    }

    // 处理文件上传
    const handleFileUpload = async ({ memberId, avatarUrl }) => {
      try {
        const response = await fetch(`/api/members/${memberId}/avatar`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${store.state.token}`
          },
          body: JSON.stringify({ avatarUrl })
        })
        const data = await response.json()
        if (data.code === 200) {
          ElMessage.success('头像更新成功')
          loadFamilyTree()
        } else {
          ElMessage.error(data.message || '头像更新失败')
        }
      } catch (error) {
        console.error('头像更新失败:', error)
        ElMessage.error('头像更新失败')
      }
    }

    // 处理成员点击
    const handleMemberClick = (event) => {
      console.log('Member clicked in Home:', event)
      const { memberId } = event

      // 获取成员卡片元素
      const memberCard = document.querySelector(`[data-member-id="${memberId}"]`)
      if (!memberCard) {
        console.log('Member card not found')
        return
      }

      // 获取容器元素
      const container = document.querySelector('.tree-wrapper')
      if (!container) {
        console.log('Container not found')
        return
      }

      // 获取元素位置信息
      const containerRect = container.getBoundingClientRect()
      const memberRect = memberCard.getBoundingClientRect()

      // 计算元素中心点（相对于视口）
      const memberCenterX = memberRect.left + memberRect.width / 2
      const memberCenterY = memberRect.top + memberRect.height / 2

      // 计算容器中心点（相对于视口）
      const containerCenterX = containerRect.left + containerRect.width / 2
      const containerCenterY = containerRect.top + containerRect.height / 2

      // 计算需要的偏移量（考虑当前的缩放和位置）
      const offsetX = (containerCenterX - memberCenterX)
      const offsetY = (containerCenterY - memberCenterY)

      // 设置新的缩放值（如果当前缩放小于1.5）
      if (scale.value < 1.5) {
        scale.value = 1.5
      }

      // 平滑过渡到新位置
      translateX.value += offsetX / scale.value
      translateY.value += offsetY / scale.value

      // 高亮显示选中的成员
      highlightedMember.value = { id: memberId }
      setTimeout(() => {
        highlightedMember.value = null
      }, 3000)
    }

    // 滚动到成员
    const scrollToMember = (member) => {
      searchResults.value = []
      searchQuery.value = ''
      
      // 先重置缩放比例
      scale.value = 0.8

      // 等待下一个渲染周期
      nextTick(() => {
        const memberCard = document.querySelector(`[data-member-id="${member.id}"]`)
        const container = document.querySelector('.tree-wrapper')
        
        if (!memberCard || !container) {
          console.log('Member card or container not found')
          return
        }

        const containerRect = container.getBoundingClientRect()
        const memberRect = memberCard.getBoundingClientRect()

        // 计算需要的偏移量，使目标成员位于容器中心位置
        const containerCenterX = containerRect.left + containerRect.width / 2
        const containerCenterY = containerRect.top + containerRect.height / 2
        const memberCenterX = memberRect.left + memberRect.width / 2
        const memberCenterY = memberRect.top + memberRect.height / 2

        // 计算偏移量
        const offsetX = containerCenterX - memberCenterX
        const offsetY = containerCenterY - memberCenterY

        // 更新位置
        translateX.value = offsetX / scale.value
        translateY.value = offsetY / scale.value

        // 高亮显示目标成员
        highlightedMember.value = { id: member.id }
        setTimeout(() => {
          highlightedMember.value = null
        }, 3000)
      })
    }

    // 显示登录对话框
    const showLoginDialog = () => {
      console.log('点击登录按钮')
      router.push('/login')
    }

    // 退出登录
    const handleLogout = () => {
      store.dispatch('logout')
      ElMessage.success('已退出登录')
    }

    // 处理滚轮缩放
    const handleWheel = (event) => {
      // 只有按住 Ctrl 键时才处理缩放
      if (!event.ctrlKey) return

      const delta = event.deltaY
      const scaleSpeed = 0.001
      const newScale = scale.value - delta * scaleSpeed

      // 限制缩放范围在 0.5 到 2 之间
      if (newScale >= 0.5 && newScale <= 2) {
        // 获取鼠标相对于容器的位置
        const container = document.querySelector('.tree-wrapper')
        const containerRect = container.getBoundingClientRect()
        const mouseX = event.clientX - containerRect.left
        const mouseY = event.clientY - containerRect.top

        // 计算鼠标位置相对于容器中心的偏移
        const centerX = containerRect.width / 2
        const centerY = containerRect.height / 2
        const offsetX = (mouseX - centerX) / scale.value
        const offsetY = (mouseY - centerY) / scale.value

        // 更新缩放和位置
        scale.value = newScale
        translateX.value = offsetX * (1 - newScale / scale.value) + translateX.value
        translateY.value = offsetY * (1 - newScale / scale.value) + translateY.value
      }
    }

    onMounted(() => {
      loadFamilyTree()
    })

    onUnmounted(() => {
      // 清理事件监听
      document.removeEventListener('mousemove', handleDrag)
      document.removeEventListener('mouseup', stopDrag)
    })

    return {
      searchQuery,
      searchResults,
      showEditDialog,
      showDeleteDialog,
      editingMember,
      deletingMember,
      modalTitle,
      highlightedMember,
      isAdmin,
      scale,
      rules,
      ancestor,
      handleSearch,
      zoomIn,
      zoomOut,
      resetView,
      formatDate,
      editMember,
      addSpouse,
      addChild,
      deleteSpouse,
      deleteChild,
      confirmDelete,
      saveMember,
      handleFileUpload,
      scrollToMember,
      showLoginDialog,
      handleLogout,
      Search,
      ZoomIn,
      ZoomOut,
      Refresh,
      Warning,
      isDragging,
      translateX,
      translateY,
      startDrag,
      handleDrag,
      stopDrag,
      handleWheel,
      handleMemberClick
    }
  }
}
</script>

<style scoped>
.home {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

h1 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.search-box {
  position: relative;
  width: 300px;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
}

.search-result-item {
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-result-item:hover {
  background-color: #f5f7fa;
}

.toolbar {
  margin-bottom: 20px;
  text-align: center;
}

.tree-wrapper {
  position: relative;
  height: calc(100vh - 180px);
  overflow: hidden;
  background: #f5f7fa;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 0;
}

.tree-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  cursor: grab;
  z-index: 1;
  transition: transform 0.3s ease-out;
}

.tree-container.dragging {
  transition: none;
  cursor: grabbing;
}

/* 禁用文本选择 */
.tree-container * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.mode-indicator {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: v-bind("isAdmin ? '#f0f0f0' : '#67c23a'");
  color: v-bind("isAdmin ? '#606266' : '#ffffff'");
  margin-left: 10px;
}

.mode-indicator.admin {
  background-color: #409eff;
  color: white;
}

:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

:deep(.el-dialog__header) {
  margin: 0;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

:deep(.el-dialog__title) {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-date-editor) {
  width: 100%;
}

:deep(.el-button) {
  padding: 12px 24px;
  font-size: 14px;
  border-radius: 8px;
  transition: all 0.3s ease;
  border: none;
}

:deep(.el-button--primary) {
  background: v-bind("isAdmin ? 'linear-gradient(135deg, #409eff 0%, #3a8ee6 100%)' : 'linear-gradient(135deg, #409eff 0%, #3a8ee6 100%)'");
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: v-bind("isAdmin ? '0 4px 12px rgba(64, 158, 255, 0.3)' : '0 4px 12px rgba(64, 158, 255, 0.3)'");
}

:deep(.el-button--primary:active) {
  transform: translateY(0);
}

:deep(.el-button--danger) {
  background: linear-gradient(135deg, #f56c6c 0%, #e64242 100%);
  border: none;
}

:deep(.el-button--danger:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
}

:deep(.el-button--danger:active) {
  transform: translateY(0);
}

.delete-content {
  text-align: center;
  padding: 40px 20px;
}

.warning-icon {
  font-size: 48px;
  color: #e6a23c;
  margin-bottom: 20px;
  display: block;
}

.highlight {
  color: #f56c6c;
  font-weight: bold;
  font-size: 18px;
}

.warning-text {
  color: #909399;
  font-size: 14px;
  margin-top: 10px;
}
</style> 